<template>
 <div class="user_manager">
    <!-- 查询模块 -->
   <div class="query_form">
        <el-form :inline="true" :model="deptForm" class="demo-form-inline">
    <el-form-item label="部门名称">
      <el-input v-model="deptForm.deptName"  placeholder="请输入部门名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
    </div> 
      <div class="base_table">
       <div class="action">
        <el-button type="primary" @click="deptAdd">创建</el-button>
      </div> 
      <!-- 列表部分 -->
       <el-table 
      ref="multipleTableRef" 
      :data="deptList" 
      style="width: 100%"
      row-key="_id"
      :tree-props="{ children: 'children' }">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
            :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" @click="deptEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deptDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    
    </div> 
    <!-- 弹框 -->
     <el-dialog v-model="showModel" title="创建部门" class="addUser">
      <el-form :model="deptForm" ref="dialogForm" :rules="rules">
        <el-form-item label="上级部门" prop="parentId" label-width="100px">
       <el-cascader v-model="deptForm.parentId" :options="deptList"
         :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
         clearable
       />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName" label-width="100px">
          <el-input v-model="deptForm.deptName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="负责人" prop="userName" label-width="100px">
        <el-select
            v-model="deptForm.userList"
            multiple
            placeholder="选择部门负责人"
            style="width: 100%"
          >
            <el-option
              v-for="item in userList"
              :key="item._id"
              :label="item.userName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="userEmail" label-width="100px">
          <el-input v-model="userList.userEmail" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>

<script setup>
import api from "./../api"
import {ref,reactive,nextTick,toRaw}from 'vue'
import utils from "./../utils/utiles"
// 定义查询和重置
const query=()=>{
  
  getdeptlist()
}
const reset=()=>{
  getdeptlist()
}
// 获取表单节点
const dialogForm=ref(null)
// 编辑列表
const deptEdit=(row)=>{
  action.value="edit"
  showModel.value=!showModel.value
nextTick(()=>{
  Object.assign(deptForm,row)
})
}
//定义用户列表
const userList=ref([])
const getUsersList=async()=>{
    let {list}=await api.getUsersList()
    userList.value=list;
}
getUsersList()
// 删除列表
const deptDel=async(row)=>{
  action.value="delete"
  //  console.log(row._id)
    let data={_id:row._id,action:action.value}
    await api.deptOperate(data)
getdeptlist()
}
// 定义用户行为
const action=ref("create")
// 定义弹窗弹出来的方法
const deptAdd=()=>{
    action.value='create'
    showModel.value=!showModel.value
}
// 定义弹窗是否显示
const showModel=ref(false)
// 定义部门列表
const deptList=ref([])
const deptForm=reactive({})
const getdeptlist=async()=>{
    let res=await api.getDeptList()
    deptList.value=res
    console.log(deptList.value);
}
getdeptlist()
// 定义动态列表
const columns=reactive([
   {
    label: "部门名称",
    prop: "deptName",
    width:"150"
  },
  {
    label: "负责人",
    prop: "userName",
  },
    {
    label: "更新时间",
    prop: "updateTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
])
// 定义正则
const rules=reactive({
   
        deptName: [
          {
            required: true,
            message: "请输入上级部门名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在2-8个字符",
            trigger: "blur",
          },
        ],
         deptName: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在2-8个字符",
            trigger: "blur",
          },
        ], userName: [
          {
            required: true,
            message: "请输入负责人名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在2-8个字符",
            trigger: "blur",
          },
        ],
      

})
// 重置表单的方法
const resetForm=()=>{
     dialogForm.value.resetFields()
}
// 提交按钮的方法
const handleSubmit=()=>{
dialogForm.value.validate(async(valid)=>{
  if(valid){
     let data=toRaw(deptForm)
            console.log(data);
            data.action=action.value
            let res=await api.deptOperate(data)
            resetForm()
            showModel.value=!showModel.value
            getdeptlist()
  }
})
}
</script>

<style lang="scss" scoped>

</style>